<template>
  <div>
    <el-dialog :title="flag.add?'添加':'修改'" :visible.sync="flag.isshow" @closed="closed">
      <div>{{form}}</div>
      <el-form :model="form">
        <el-form-item label="菜单名称">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择" @change="pidType">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option :label="item.title" :value="item.id" v-for="(item,index) in list" :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单目录">
          <el-radio v-model="form.type" :label="1" disabled>目录</el-radio>
          <el-radio v-model="form.type" :label="2" disabled>菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单地址" v-show="!form.pid==0">
          <el-select v-model="form.url" placeholder="请选择">
            <el-option
              :label="item.meta.title"
              :value="'/'+item.path"
              v-for="(item,index) in routersPath"
              :key="index"
            >{{item.meta.title}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标" v-show="form.pid==0">
          <el-select v-model="form.icon" placeholder="请选择">
            <el-option :label="item" :value="item" v-for="item in icon" :key="item">
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否禁用">
        <el-switch v-model="form.status" active-color="#13ce66" :inactive-value="1" :active-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add" v-if="flag.add">添 加</el-button>
        <el-button type="primary" @click="change" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { routersPath } from "../../../router/index";
import { menuAdd,reqmenuinfo,reqmenuedit } from "../../../request/api";
export default {
  data() {
    return {
      icon: [
        "el-icon-s-help",
        "el-icon-picture",
        "el-icon-camera-solid",
        "el-icon-s-cooperation",
        "el-icon-s-promotion"
      ],
      form: {
        pid: "", //上级菜单编号
        title: "", //标题
        icon: "",
        type: "", //类型：1目录，2菜单
        url: "", // 菜单地址
        status: 1 //状态：1正常2禁用
      },
      routersPath,
      muluShow:true,
      fromId:null
    };
  },
  props: ["flag","list"],
  component: {},
  methods: {
    //添加
    add() {
      menuAdd(this.form);
      this.cancel();
      this.clear()
    },
    // 回调
    closed() {
      if(this.flag.add){
        this.flag.add=false
      }else{
        this.flag.add=true
        this.clear()
      }
      this.$emit("request");
      
    },
    //取消
    cancel() {
      this.flag.isshow = false;
    },
    //清空
    clear(){
      this.form={pid: "",title: "",icon: "",type: "",url: "",status: 1}
    },
    pidType(){
      if(this.form.pid==0){
        this.form.type=1
        this.muluShow=false
      }else{
        this.form.type=2
        this.muluShow=true
      }
    },
    // 修改
    change(){
      reqmenuedit({...this.form,id:this.fromId})
      this.flag.isshow = false;
    },
    //获取一条数据
    getOne(id){
      reqmenuinfo({ id: id }).then(res => {
        this.form = res.data.list;
        this.fromId = id
      });
    }
  },
  mounted() {
  },
};
</script>
<style lang="less" scoped>
</style>